<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Mock Extension</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>API Mock Extension</h1>
            <div class="header-actions">
                <button id="addRuleBtn" class="btn btn-primary">
                    <span class="icon">+</span>
                    添加规则
                </button>
            </div>
        </header>

        <div class="tabs">
            <button class="tab-btn active" data-tab="rules">拦截规则</button>
            <button class="tab-btn" data-tab="logs">请求日志</button>
        </div>

        <!-- 拦截规则标签页 -->
        <div id="rulesTab" class="tab-content active">
            <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索规则..." class="search-input">
            </div>
            
            <div id="rulesList" class="rules-list">
                <!-- 规则列表将在这里动态生成 -->
            </div>

            <div id="emptyState" class="empty-state">
                <div class="empty-icon">📝</div>
                <h3>还没有拦截规则</h3>
                <p>点击"添加规则"按钮开始创建您的第一个API拦截规则</p>
            </div>
        </div>

        <!-- 请求日志标签页 -->
        <div id="logsTab" class="tab-content">
            <div class="logs-header">
                <button id="clearLogsBtn" class="btn btn-secondary">清除日志</button>
            </div>
            <div id="logsList" class="logs-list">
                <!-- 日志列表将在这里动态生成 -->
            </div>
        </div>
    </div>

    <!-- 添加/编辑规则模态框 -->
    <div id="ruleModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">添加拦截规则</h2>
                <button id="closeModalBtn" class="close-btn">&times;</button>
            </div>
            
            <form id="ruleForm" class="modal-body">
                <div class="form-group">
                    <label for="ruleName">规则名称</label>
                    <input type="text" id="ruleName" placeholder="请输入规则名称" required>
                </div>

                <!-- 接口选择区域 -->
                <div class="form-group">
                    <label for="apiSelector">选择接口</label>
                    <div class="api-selector-container">
                        <select id="apiSelector">
                            <option value="">请选择一个接口...</option>
                        </select>
                        <button type="button" id="refreshApisBtn" class="btn btn-secondary btn-small">
                            刷新接口
                        </button>
                    </div>
                    <div class="form-hint">从当前页面的请求记录中选择要拦截的接口</div>
                </div>

                <!-- 接口信息显示区域 -->
                <div id="apiInfoSection" class="api-info-section" style="display: none;">
                    <div class="api-info">
                        <h4>接口信息</h4>
                        <div class="api-details">
                            <div class="api-method-url">
                                <span id="selectedApiMethod" class="api-method">GET</span>
                                <span id="selectedApiUrl" class="api-url">URL将在这里显示</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="urlPattern">URL 匹配模式</label>
                    <input type="text" id="urlPattern" placeholder="例如: /api/users 或 /^https:\/\/api\.example\.com\/.*$/" required>
                    <div class="form-hint">支持字符串包含匹配或正则表达式（用 / 包围）</div>
                </div>

                <div class="form-group">
                    <label for="method">HTTP 方法</label>
                    <select id="method">
                        <option value="">任意</option>
                        <option value="GET">GET</option>
                        <option value="POST">POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                        <option value="PATCH">PATCH</option>
                    </select>
                </div>

                <div class="form-section">
                    <h3>请求修改</h3>
                    <div class="checkbox-group">
                        <input type="checkbox" id="enableRequestMod">
                        <label for="enableRequestMod">启用请求修改</label>
                    </div>

                    <div id="requestModSection" class="modification-section">
                        <div class="form-group">
                            <label for="requestHeaders">请求头 (JSON)</label>
                            <textarea id="requestHeaders" placeholder='{"Content-Type": "application/json", "Authorization": "Bearer token"}'></textarea>
                        </div>
                        <div class="form-group">
                            <label for="requestBody">请求体 (JSON)</label>
                            <textarea id="requestBody" placeholder='{"key": "value"}'></textarea>
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3>响应修改</h3>
                    <div class="checkbox-group">
                        <input type="checkbox" id="enableResponseMod">
                        <label for="enableResponseMod">启用响应修改</label>
                    </div>

                    <div id="responseModSection" class="modification-section">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="responseStatus">状态码</label>
                                <input type="number" id="responseStatus" value="200" min="100" max="599">
                            </div>
                            <div class="form-group">
                                <label for="responseDelay">延迟 (ms)</label>
                                <input type="number" id="responseDelay" value="0" min="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="responseHeaders">响应头 (JSON)</label>
                            <textarea id="responseHeaders" placeholder='{"Content-Type": "application/json"}'></textarea>
                        </div>
                        <div class="form-group">
                            <label for="responseBody">响应体 (JSON)</label>
                            <textarea id="responseBody" placeholder='{"message": "Mock response"}'></textarea>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" id="cancelBtn" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-primary">保存规则</button>
                </div>
            </form>
        </div>
    </div>

    <script src="popup.js"></script>
</body>
</html>